@mixin vendor($property, $value) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  -o-#{$property}: $value;
  #{$property}: $value;
}

@mixin z-index($value) {
  @if $value == 'underground' {
    z-index: -1;
  } @else if $value == 'floor' {
    z-index: 1;
  } @else if $value == 'cloud' {
    z-index: 9;
  } @else if $value == 'sky' {
    z-index: 1001;
  } @else if $value == 'orbit' {
    z-index: 1003;
  } @else {
    @error "'#{$value}' is not a valid z-index value";
  }
}

@mixin clearfix() {
  &:before,
  &:after {
    content: ' ';
    display: table;
  }

  &:after {
    clear: both;
  }
}

@mixin scrollbar($width: 5px, $trackbg: var(--scrollbar-track-background), $thumb-color: var(--scrollbar-thumb-color)) {
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    background: white;
    width: $width;
  }
  &::-webkit-scrollbar-track {
    box-shadow: none;
    background: $trackbg;
  }
  &::-webkit-scrollbar-thumb {
    background-color: $thumb-color;
    border-radius: 10px;
  }
}
@mixin font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@mixin trans() {
  transition: all 0.15s ease-in-out;
}

@mixin button($variant: default) {
  background-color: var(--color-button-#{$variant}-base-fill);
  border-color: var(--color-button-#{$variant}-base-border);
  color: var(--color-button-#{$variant}-base-text);

  @if ($variant == primary or $variant == upgrade) {
    text-shadow: var(--text-shadow-dark-ui);
    svg {
      @include drop-shadow--dark-ui;
    }
  }

  &:hover:not(.button--no-text--disabled) {
    background-color: var(--color-button-#{$variant}-hover-fill);
    border: 1px solid var(--color-button-#{$variant}-hover-border);
    color: var(--color-button-#{$variant}-hover-text);
  }
  &:active:not(.button--no-text--disabled) {
    background-color: var(--color-button-#{$variant}-active-fill);
    border: 1px solid var(--color-button-#{$variant}-active-border);
    color: var(--color-button-#{$variant}-active-text);
  }
}

@mixin generateVars() {
  // Base Color Variables
  @each $var, $val in $colors {
    @if type-of($val) == map {
      @each $var-n, $val-n in $val {
        @if type-of($val-n) == map {
          @each $var-i, $val-i in $val-n {
            #{--color}-#{$var}-#{$var-n}-#{$var-i}: $val-i;
          }
        } @else {
          #{--color}-#{$var}-#{$var-n}: $val-n;
        }
      }
    } @else {
      #{--color}-#{$var}: $val;
    }
  }

  // Brand Colors
  @each $var, $val in $brand {
    #{--color}-#{$var}: $val;
  }

  // Text Color
  @each $var, $val in $text {
    #{--color}-#{$var}: $val;
  }
  // Border Colors
  @each $var, $val in $border-colors {
    #{--color-border}-#{$var}: $val;
  }
  // Background Colors
  @each $var, $val in $fills {
    #{--color}-#{$var}: $val;
  }
  // Button Color Variables
  @each $var, $val in $buttons {
    @if type-of($val) == map {
      @each $var-n, $val-n in $val {
        #{--color-button}-#{$var}-#{$var-n}: $val-n;
      }
    } @else {
      #{--color}-#{$var}: $val;
    }
  }

  // Spacing Units
  @each $var, $val in $spacing {
    #{--spacing}-#{$var}: $val;
  }

  // Font Variables (font-size, weight, etc)
  @each $var, $val in $font {
    @each $var-n, $val-n in $val {
      #{--font}-#{$var}-#{$var-n}: $val-n;
    }
  }

  @each $var, $val in $borders {
    #{--border}-#{$var}: $val;
  }

  @each $var, $val in $text-shadows {
    #{--text-shadow}-#{$var}: $val;
  }
  @each $var, $val in $box-shadows {
    #{--box-shadow}-#{$var}: $val;
  }

  @each $var, $val in $scrollbar {
    #{--scrollbar}-#{$var}: $val;
  }

  @each $var, $val in $panel {
    #{--panel}-#{$var}: $val;
  }
  @each $var, $val in $fold {
    #{--fold}-#{$var}: $val;
  }
  @each $var, $val in $sidebar {
    #{--sidebar}-#{$var}: $val;
  }
  --editor-width: calc(
    var(--sidebar-width) + var(--panel-width) + 1px
  ); // +1px for border
}

@mixin heading($type: 'base') {
  @if ($type == 'small') {
    color: var(--color-text-headings);
    font-size: var(--font-size-heading-small);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-leading-head);
    font-family: var(--font-family-headings);
    letter-spacing: var(--font-letter-spacing-headings);
  } @else if ($type == 'medium') {
    color: var(--color-text-headings);
    font-size: var(--font-size-heading-medium);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-leading-head);
    font-family: var(--font-family-headings);
    letter-spacing: var(--font-letter-spacing-headings);
  } @else {
    color: var(--color-text-headings);
    font-size: var(--font-size-heading-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-leading-head);
    font-family: var(--font-family-headings);
    letter-spacing: var(--font-letter-spacing-headings);
  }
}

@mixin animate($type: 'fade-in', $time: 1s, $delay: 0s) {
  @if $type == 'fade-in' {
    @extend .animate--fade-in;
    animation-duration: $time;
    animation-delay: $delay;
  }
  @if $type == 'fade-out' {
    @extend .animate--fade-out;
    animation-duration: $time;
    animation-delay: $delay;
  }
  @if $type == 'fsb' {
    @extend .animate--fade-and-slide-in-from-bottom;
    animation-duration: $time;
    animation-delay: $delay;
  }
  @if $type == 'fsbr' {
    @extend .animate--fsbr;
    animation-duration: $time;
    animation-delay: $delay;
  }
}
